<template>
  <div>
    <!-- 修改设备弹出框 -->
    <div class="dil">
      <el-dialog
        v-if="tacticc"
        title="修改设备"
        :visible="visible"
        width="50%"
        top="2vh"
        @close="closeFn"
        @open="openFn"
      >
        <!-- 表单内容 -->
        <el-form
          ref="departRef"
          :model="departForm"
          :rules="departRules"
          label-width="120px"
        >
          <el-form-item label="机器编号:">
            <span>{{ tacticc.innerCode }}</span>
          </el-form-item>
          <el-form-item label="供货时间:">
            <span>{{ formatDate(tacticc.createTime ) }}</span>
          </el-form-item>
          <el-form-item label="设备类型:">
            <span v-if="!!tacticc.type">{{ tacticc.type.name }}</span>
          </el-form-item>
          <el-form-item label="设备容量:">
            <span v-if="!!tacticc.type"> {{ tacticc.type.vmCol }}</span>
          </el-form-item>
          <el-form-item label="设备点位:" prop="vmType">
            <el-select
              v-model="departForm.vmType"
              style="width: 85%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in mobel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="合作商:">
            <span> {{ tacticc.ownerName }}</span>
          </el-form-item>
          <el-form-item label="所属区域:">
            <span v-if="!!tacticc.region"> {{ tacticc.region.remark }}</span>
          </el-form-item>
          <el-form-item label="设备地址:">
            <span v-if="!!tacticc.node"> {{ tacticc.node.name }}</span>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="btnquxiao" @click="closeFn">取 消</el-button>
          <el-button
            type="primary"
            class="btn1"
            @click="submitWork(departForm)"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { serchNodeListApi } from '@/api'
import dayjs from 'dayjs'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tacticc: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      mobel: [],
      departForm: { vmType: '' },
      // 表单校验
      departRules: {
        vmType: [
          { required: true, message: '请选择型号', trigger: ['blur'] }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    // 弹窗打开
    // 引入接口
    // 在弹窗打开时调用
    async openFn() {
      const { data } = await serchNodeListApi({
        pageIndex: 1,
        pageSize: 100000
      })
      this.mobel = data.currentPageRecords
      // console.log(this.tacticc.type.name)
      console.log(this.tacticc)
    },

    // 修改提交
    submitWork() {
      this.$emit('submit', this.departForm.vmType)
    },

    // 关闭弹窗
    closeFn() {
      console.log('关闭')
      this.$emit('close')
    },

    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    }
  }

}
</script>

<style >
</style>
